<template>
  <vc-page>
    <div>
      <p>{{introduce}}</p>
      <p>{{introduceText}}</p>
    </div>
    <a-button @click="hello">你好</a-button>
  </vc-page>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'

  export default defineComponent({
    setup() {
      const store = useStore()
      const introduce = computed(() => {
        return `setup > computed：${store.state.introduce}`
      })
      return {
        introduce
      }
    },
    computed: {
      introduceText() {
        return `computed：${this.$store.state.introduce}`
      }
    },
    mounted() {
      this.$utils.sayHello({
        type: 'success',
        content: '自我介绍'
      })
    },
    methods: {
      hello() {
        this.$message.info('你好啊')
      }
    }
  })
</script>